<template>
  <view class="viewport">
    <view class="nav">
      <fui-nav-bar background="#0052D9" title="我的" color="#fff"></fui-nav-bar>
      <view class="head">
        <image
          class="head_img"
          src="../../static/images/index/1704738931441.png"
          mode=""
        ></image>
        <view class="right">
          <view class="">
            <span style="font-weight: 600; margin-right: 10rpx">赵小刚</span>
            <span>部门主任</span>
          </view>
          生产部门一
        </view>
      </view>
    </view>
    <view class="warp">
      <view class="port">
        <view class="port_A">
          <view class="content_box">
            <view class="item">
              <image
                class="image"
                src="/static/images/institution/doctor.png"
                mode=""
              ></image>
              <view class="content_title">我的报修</view>
            </view>
            <view class="item">
              <image
                class="image"
                src="/static/images/institution/doctor.png"
                mode=""
              ></image>
              <view class="content_title">我的维修</view>
            </view>
            <view class="item">
              <image
                class="image"
                src="/static/images/institution/doctor.png"
                mode=""
              ></image>
              <view class="content_title">我的保养</view>
            </view>
            <view class="item">
              <image
                class="image"
                src="/static/images/institution/doctor.png"
                mode=""
              ></image>
              <view class="content_title">巡检点检</view>
            </view>
          </view>
        </view>

        <view class="footer">
          <fui-list>
            <fui-list-cell arrow>
              <view class="fui-align__center">
                <text>修改密码</text>
              </view>
            </fui-list-cell>
            <fui-list-cell arrow>
              <view class="fui-align__center">
                <text>清除缓存</text>
              </view>
            </fui-list-cell>
            <fui-list-cell arrow>
              <view class="fui-align__center">
                <text>版本更新</text>
              </view>
            </fui-list-cell>
            <fui-list-cell arrow>
              <view class="fui-align__center">
                <text>关于我们</text>
              </view>
            </fui-list-cell>
          </fui-list>
        </view>

        <view class="outLog" @tap="handleLogout">退出登录</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { useUserStore } from "@/stores/user";

// 处理退出登录
const handleLogout = () => {
  uni.showModal({
    title: "提示",
    content: "确定要退出登录吗？",
    success: (res) => {
      if (res.confirm) {
        // 1. 清除登录状态
        const userStore = useUserStore();
        userStore.setToken(""); // 或 userStore.clearToken()，根据你的 store 实现

        // 2. 提示退出成功
        uni.showToast({
          title: "已退出登录",
          icon: "success",
        });

        // 3. 跳转到登录页
        setTimeout(() => {
          uni.redirectTo({
            url: "/pages/my/login",
          });
        }, 1000);
      }
    },
  });
};
</script>

<style lang="scss" scoped>
page {
  height: 100vh;
  background-color: pink;
}
.viewport {
}
.nav {
  background-color: #0052d9;
  .head {
    display: flex;
    align-items: center;
    padding: 40rpx 25rpx 80rpx;
    .head_img {
      width: 88rpx;
      height: 88rpx;
      border-radius: 50%;
    }
    .right {
      margin-left: 20rpx;
      color: #fff;
    }
  }
}

.warp {
  height: 100%;
  background-color: #f6f6f6;
  font-family: Arial, Helvetica, sans-serif;
  padding-bottom: 150rpx;
  position: relative;

  .port {
    padding: 18rpx;
    .port_A {
      z-index: 2;
      background-color: #fff;
      border-radius: 15rpx;
      margin-bottom: 18rpx;
      margin-top: -95rpx;
    }
    .content_box {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

      padding: 15rpx 30rpx;
      margin: 20rpx 0;
      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        height: 140rpx;
        width: 120rpx;
      }
      .image {
        height: 48rpx;
        width: 48rpx;
      }
      .content_title {
        font-size: 25rpx;
      }
    }
  }
  .footer {
    margin-top: 24rpx;
    .fui-align__center {
      flex: 1;
      display: flex;
      align-items: center;
    }
    .fui-text__explain {
      color: #ccc;
    }

    .fui-list__icon {
      width: 48rpx;
      height: 48rpx;
      margin-right: 24rpx;
    }
  }
  .outLog {
    background-color: #0052d9;
    height: 75rpx;
    border-radius: 10rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;
    color: #fff;
    margin-top: 60rpx;
  }
}
</style>
